<template>
    <el-card>
      <div style="font-size: 25px;">
        ├── <span class="file">build</span>    <span class="remark">// 项目构建(webpack)相关代码</span>
        <br>│   ├── <span class="file">build.js</span>    <span class="remark">// 生产环境构建代码</span>
        <br>│   ├── <span class="file">check-versions.js</span>    <span class="remark">// 检查node、npm等版本</span>
        <br>│   ├── <span class="file">utils.js</span>    <span class="remark">// 构建工具相关</span>
        <br>│   ├── <span class="file">vue-loader.conf.js</span>    <span class="remark">// webpack loader配置</span>
        <br>│   ├── <span class="file">webpack.base.conf.js</span>    <span class="remark">// webpack基础配置</span>
        <br>│   ├── <span class="file">webpack.dev.conf.js</span>    <span class="remark">// webpack开发环境配置,构建开发本地服务器</span>
        <br>│   └── <span class="file">webpack.prod.conf.js</span>    <span class="remark">// webpack生产环境配置</span>
        <br>├── <span class="file">config</span>    <span class="remark">// 项目开发环境配置</span>
        <br>│   ├── <span class="file">dev.env.js</span>    <span class="remark">// 开发环境变量</span>
        <br>│   ├── <span class="file">index.js</span>    <span class="remark">// 项目一些配置变量</span>
        <br>│   └── <span class="file">prod.env.js</span>    <span class="remark">// 生产环境变量</span>
        <br>├── <span class="file">dist</span>    <span class="remark">//项目打包后的文件</span>
        <br>├── <span class="file">node_modules</span>    <span class="remark">//依赖</span>
        <br>├── <span class="file">src</span>    <span class="remark">// 源码目录</span>
        <br>│   ├── <span class="file">assets</span>    <span class="remark">//资源目录</span>
        <br>│   │   │── <span class="file">img</span>     <span class="remark">//图片目录</span>
        <br>│   │   │── <span class="file">js</span>      <span class="remark">//js目录</span>
        <br>│   │   │── <span class="file">font</span>    <span class="remark">//字体和字体图标目录</span>
        <br>│   │   └── <span class="file">css</span>     <span class="remark">//css目录</span>
        <br>│   ├── <span class="file">style</span>     <span class="remark">//less目录</span>
        <br>│   │   │── <span class="file">reset.less</span>    <span class="remark">//重置css样式</span>
        <br>│   │   │── <span class="file">public.less</span>   <span class="remark"> //定义一些公用的颜色、字体大小等，方便以后统一改风格</span>
        <br>│   ├── <span class="file">components</span>     <span class="remark">//组件目录</span>
        <br>│   │   │── <span class="file">public</span>     <span class="remark">//公共组件</span>
        <br>│   │   └── <span class="file">module</span>     <span class="remark">//单个页面，或者单独模块的组件</span>
        <br>│   ├── <span class="file">view</span>     <span class="remark">//页面目录</span>
        <br>│   ├── <span class="file">api</span>
        <br>│   │   └── <span class="file">api.js</span>    <span class="remark">//ajax请求路径</span>
        <br>│   ├── <span class="file">router</span>    <span class="remark">//路由文件</span>
        <br>│   │    │── <span class="file">index.js</span>    <span class="remark">//路由拦截</span>
        <br>│   │    └── <span class="file">routers.js</span>    <span class="remark">//路由管理</span>
        <br>│   ├── <span class="file">store</span>    <span class="remark">//vueX目录(如果使用vuex)</span>
        <br>│   │   │── <span class="file">state.js</span>    <span class="remark">//状态管理</span>
        <br>│   │   │── <span class="file">mutation.js</span> <span class="remark">   //更改 Vuex 的 store 中的状态的唯一方法</span>
        <br>│   │   │── <span class="file">action.js</span>   <span class="remark"> //Action 提交的是 mutation，而不是直接变更状态（异步操作）</span>
        <br>│   │   └── <span class="file">module</span>    <span class="remark">//也可以根据页面或者组件分模块</span>
        <br>│   ├── <span class="file">libs</span>    <span class="remark">//工具函数文件</span>
        <br>│   │    │── <span class="file">util.js</span>    <span class="remark">//工具函数</span>
        <br>│   │    └── <span class="file">httpRequest.js</span>    <span class="remark">//ajax请求全局封装位置(统一用axios)</span>
        <br>│   ├── <span class="file">mock</span>    <span class="remark">//mock</span>
        <br>│   │    │── <span class="file">module</span>   <span class="remark">//单个模块mock拦截</span>
        <br>│   │    └── <span class="file">index.js</span>    <span class="remark">//mock拦截</span>
        <br>│   ├── <span class="file">App.vue</span>     <span class="remark">// 页面入口文件</span>
        <br>│   ├── <span class="file">config.js</span>     <span class="remark">// 系统参数配置</span>
        <br>│   └── <span class="file">main.js</span>     <span class="remark">// 程序入口文件，加载各种公共组件</span>
        <br>├── <span class="file">static</span>    <span class="remark">// 静态文件</span>
        <br>├── <span class="file">.babelrc</span>    <span class="remark">// ES6语法编译配置</span>
        <br>├── <span class="file">.editorconfig</span>    <span class="remark">// 定义代码格式</span>
        <br>├── <span class="file">.postcsssrc</span>  <span class="remark">  // postcss配置文件</span>
        <br>├── <span class="file">index.html</span>   <span class="remark"> // 入口页面</span>
        <br>├── <span class="file">package.json</span> <span class="remark">   // 项目基本信息,包依赖信息等</span>
        <br>├── <span class="file">README.md</span>    <span class="remark">// 项目说明</span>
      </div>
    </el-card>
</template>

<script>
  export default {
    name: 'structure'
  }
</script>

<style scoped>
  .file{
    color: #3182bd;
  }
  .remark{
    margin-left: 100px;
    color: #4bb114;
  }
</style>
